<template>
  <div class="login">
    <!-- <div @click="back()" class="iconfont ret icon-fanhui"></div> -->
    <div class="iconfont icon-lvyou top"></div>
    <div class="content">
      <div class="inputs">
        <div>
          <input type="text"  placeholder="请输入手机号" v-model="value" @change="isPhone(value)" />
          <div style="color:red" v-show="phoneFlag">请输入正确的电话号码</div>
        </div>
        <div>
          <form>
            <input type="password"  placeholder="请输入密码" v-model="sec" @change="isSec(sec)" autocomplete="off"/>
          </form>
          <div style="color:red" v-show="passwordFlag">请输入正确的密码</div>
        </div>
      </div>

      <div v-show="flag" class="go">
        <button>登录</button>
      </div>
      <div v-show="!flag" class="go2">
        <button @click="back()">登录</button>
      </div>
    </div>
  </div>
</template>

<style lang = "less">
.login {
  height: 100vh;
  width: 100vw;
  background: rgba(76, 192, 228, 0.658);
  .ret {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #f0f0f066;
    padding: 10px;
    padding-left: 13px;
    color: white;
    border-radius: 50%;
  }
  .top {
    padding-top: 150px;
    padding-bottom: 40px;
    font-size: 100px;
    color: white;
  }
  .content {
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 180px;
    .inputs {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      height: 100px;
      input {
        border: none;
        border-radius: 3px;
        padding: 8px 14px;
        background-color: #f0f0f066;
        color: white;
      }
      input::-webkit-input-placeholder {
        color: #ffffff;
        font-size: 14px;
      }
    }
    .go {
      button {
        border: none;
        border-radius: 3px;
        background-color: rgba(76, 192, 228,0.5);
        padding: 5px;
        width: 60%;
        height: 100%;
        color: rgba(255, 255, 255, 0.603);
      }
    }
    .go2 {
      button {
        border: none;
        border-radius: 3px;
        background-color: rgb(76, 192, 228);
        padding: 5px;
        width: 60%;
        height: 100%;
        color: white;
      }
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      flag: true,
      value:"",
      sec:"",
      phoneFlag:false,
      passwordFlag:false
    };
  },
  methods: {
    back() {
       let value = this.value;
        let sec = this.sec;
        this.isPhone(value);
        this.isSec(sec);
       if(this.phoneFlag == false && this.passwordFlag == false){
        this.flag = false;
        this.$router.push({
          name: `my`,
        });
        this.$store.commit("login");
      }else{
        this.flag = true;
      }
    },
    isPhone(value) {
      const reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value) && value != "") {
        this.phoneFlag = true;
      }else{
        this.phoneFlag = false;
      }
      this.sucessLog();
    },
    isSec(value) {
      const reg = /^[0-9]*$/
      if (!reg.test(value) && value != "") {
        this.passwordFlag = false;
      }else{
        this.passwordFlag = true;
      }
      this.sucessLog();

    },
    sucessLog(){
      if(this.phoneFlag == false && this.passwordFlag == false){
        this.flag = false;
      }else{
        this.flag = true;
      }
    }
  },
  created(){
  },
  components: {},
};
</script>